<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">

          <FormItemPanel title="色系">
            <Button class="float-right" size="small" type="primary" @click="addColor()"><Icon type="md-add" /> 新增颜色</Button>
            <div class="clearfix"></div>

            <FormItem :label="(index+1)+''" v-for="(color, index) in colors" :key="index">
              <PnColorPicker size="small" v-model="colors[index]" alpha recommend/>
              <a href="javascript:;" class="m-l-5px" style="color: #757575;" @click="deleteColor(index)"><Icon type="md-trash" /></a>
            </FormItem>
          </FormItemPanel>

          <FormItem label="透明度">
            <Slider v-model="opacity" :step="0.1" :min="0" :max="1"></Slider>
          </FormItem>

          <FormItem label="渐变角度">
            <Slider v-model="shadeAngle" :step="45" :min="0" :max="360"></Slider>
          </FormItem>

        </Form>

      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ColorLumpCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      addColor () {
        this.colors.push('')
      },

      deleteColor (index) {
        this.colors.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        opacity: 'component.compConfigData.opacity',
        shadeAngle: 'component.compConfigData.shadeAngle',
        colors: 'component.compConfigData.colors'

      })
    }
  }
</script>

<style scoped>

</style>
